<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入css、图标 -->
    <link rel="stylesheet" href="CSS.css">
    <link rel="stylesheet" href="./font_iconfont/iconfont.css">
</head>

<body>
    <div class="body">
        <!-- 上部 -->
        <section class="body-top">
            <div class="bp-left">
                <div class="bpl-left"></div>
                <div class="bpl-mid iconfont icon-shuaxin"></div>
                <div class="bpl-right">
                    积分：
                    <span class="bplr-span">0</span>
                </div>
            </div>
            <div class="bp-right">
                <div class="bpr-left"><i class="bprl-ico iconfont icon-zz"></i></div>
                <div class="bpr-right"><span class="bprr-ico">x</span></div>
            </div>
        </section>
        <!-- 下部 -->
        <section class="body-end">
            <!-- 侧栏 -->
            <div class="sidebar">
                <ul class="sbar">
                    <li class="blank"></li>
                    <li class="list bar-color-background">
                        <span class="bar-format iconfont icon-qingdan"></span>
                        <span class="bar-text">清单</span>
                    </li>
                    <li class="four-quadrant">
                        <span class="bar-format iconfont icon-sixiangxiansandiantu
                        "></span>
                        <span class="bar-text">四象限</span>
                    </li>
                    <li class="tomato">
                        <span class="bar-format iconfont icon-xihongshifanqie
                        "></span>
                        <span class="bar-text">番 茄</span>
                    </li>
                </ul>
                <div class="bar-user">
                    <span class="bar-format iconfont icon-yonghu"></span>
                </div>
            </div>
            <!-- 主体 -->
            <div class="main">
                <div class="m-list main-display">
                    <div class="ml-bar">
                        <div class="mlb-top">
                            <div class="mlb-text">
                                <span class="iconfont icon-b8_list-work
                                "></span>
                                <span>智能清单</span>
                            </div>
                        </div>
                        <div class="mlb-add">
                            <div class="mlb-list">
                                <span class="iconfont icon-jiahao"></span>
                                <span>添加清单</span>
                            </div>
                            <div class="add-list-position">
                                <form class="infoList" autocomplete="off">
                                    <div class="info-list-exit">
                                        <span class="info-list-exit-span"> &nbsp; x &nbsp;</span>
                                    </div>
                                    <input type="text" class="infoListText" placeholder="   请添加新的表单">
                                    <button class="submit-button">确定</button>
                                </form>
                            </div>
                        </div>
                        <div class="mlb-blank"></div>
                        <div class="mlb-end">
                            <div class="mlbe-title">
                                <span class="iconfont icon-biaoti
                                "></span>
                                <span>标签管理</span>
                            </div>
                            <ul class="mlbe-contain">
                                <!-- JS 添加 -->
                            </ul>
                        </div>
                    </div>
                    <section class="ml-main">
                        <div class="main-add-task">
                            <form class="main-info-task" autocomplete="off">
                                <div class="add-pending-task-module">
                                    <div>
                                        <input type="text" class="add-pending-task" placeholder="   请添加新的待办任务">
                                        <button class="submit-pending-task"><span class="iconfont icon-xiaofeiji"></span></button>
                                    </div>
                                    <div class="function-task">

                                    </div>
                                    <select name="selection-list" class="selection-list">
<!--                                    <option value="北京">北京</option>
                                        <option value="上海">上海</option>
                                        <option value="广州">广州</option>
                                        <option value="深圳">深圳</option>
                                        <option value="曹县">曹县</option> 
-->
                                    </select>
                                    <select name="quadrant-list" class="quadrant-list">
                                        <option value="1">重要 / 紧急</option>
                                        <option value="2">重要 /不紧急</option>
                                        <option value="3">不重要/ 紧急</option>
                                        <option value="4">不重要/不紧急</option>
                                    </select>
                                   <!--  <span class="iconfont icon-biaojiA unimportant"></span> -->
                                    <select name="countdown" class="countdown">
                                        <option value="5">&nbsp;&nbsp;&nbsp;5min</option>
                                        <option value="10">&nbsp;&nbsp;10min</option>
                                        <option value="20">&nbsp;&nbsp;20min</option>
                                        <option value="30">&nbsp;&nbsp;30min</option>
                                        <option value="60">&nbsp;&nbsp;60min</option>
                                    </select>
                                    <span class="textcount">0/200字</span>
                                </div>

                            </form>
                        </div>

                        
 <!--  section是一个方框，等待Js向里面添加内容    --> 
                        <section class="uncom-reverse">
                            <!-- 新创建 -->
  
                        </section>
                        <!-- 已完成，那个绿色标签的显示 -->
                        <div class="completed" data-id="no">
                            <div class="completed-block">
                                <span class="iconfont icon-xiangxiadejiantou"></span>
                                <span>以完成</span>
                            </div>
                            <div class="completed-block-div">
                                <span class="completed-num">0</span>
                            </div>
                        </div>
                        <!--  section是一个方框，等待Js向里面添加，渲染内容 --> 
                        <section class="com-reverse">
                            <!-- 已完成 -->

                        </section>
                
                    </section>
                </div>

                <!-- 四象限、整体页面 -->
                <div class="m-quadrant">
                    <div>
                        <!-- 标题 -->
                        <div class="quadrant-top">
                            四象限
                        </div>
                        <!-- 四象限界面展示-分四部分 -->
                        <div class="quadrant-body">
                            <div class="importance-urgency">
                                <div class="impor-urgen-top impor-urgen-top-color">
                                    重要且紧急
                                </div>
                                <div class="impor-urgen-bottom">
                                   <!--  <div class="quadrant-task">
                                        今天，我要去吃饭
                                    </div> -->
                                </div>
                            </div>
                            <div class="importance-notUrgency">
                                <div class="impor-urgen-top importance-notUrgency-color">
                                    重要不紧急
                                </div>
                                <div class="importance-notUrgency-body"></div>
                            </div>
                            <div class="urgency-unImportance">
                                <div class="impor-urgen-top urgency-unImportance-color">
                                    紧急不重要
                                </div>
                                <div class="urgency-unImportance-body"></div>
                            </div>
                            <div class="unImportance-notUrgency">
                                <div class="impor-urgen-top unImportance-notUrgency-color">
                                    不重要不紧急
                                </div>
                                <div class="unImportance-notUrgency-body"></div>
                            </div>
                        </div>
                    </div>
             
                </div>

                <!-- 简单的番茄中页面 -->
                <div class="m-tomato">
                    <div class="watch">
                        <div class="timeplay">25:00</div>
                    </div>
                </div>

            </div>
        </section>
    </div>


    <script src="JS.js"></script>
</body>

</html>